<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>高可见度验证码</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://are.borentangjiankang.com/static/wen9/result/wwss/IL9La9PuLY.css" rel="stylesheet">


    <link href="https://are.borentangjiankang.com/static/wen9/result/faku/css/sofa.css" rel="stylesheet">

    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3B82F6',
                        success: '#10B981',
                        danger: '#EF4444',
                    }
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .code-container {
                @apply relative bg-white rounded-xl p-6 cursor-pointer transition-all duration-300 hover:shadow-lg border border-gray-100;
            }
            .code-char {
                @apply inline-block font-mono font-bold transition-all duration-300 m-1 md:m-2;
            }
            .input-focus {
                @apply focus:ring-2 focus:ring-primary/50 focus:border-primary focus:outline-none transition-all duration-300;
            }
            .btn-primary {
                @apply bg-primary text-white font-medium py-3 px-6 rounded-lg transition-all duration-300 hover:shadow-lg hover:-translate-y-0.5 active:translate-y-0;
            }
            .difficulty-option {
                @apply cursor-pointer py-1.5 px-4 rounded-full transition-all duration-300 text-sm;
            }
            .difficulty-option.active {
                @apply bg-primary text-white;
            }
        }
    </style>
</head>
<body class="bg-gray-50 min-h-screen font-sans flex items-center justify-center p-4 md:p-6">
    <div class="max-w-md w-full bg-white rounded-2xl shadow-xl overflow-hidden border border-gray-100">
        <!-- 顶部装饰条 -->
        <div class="h-1.5 bg-gradient-to-r from-primary to-blue-500"></div>
        
        <div class="p-6 md:p-8">
            <div class="text-center mb-6">
                <h2 class="font-bold text-gray-800 mb-2">如来您是为了做任务，到这一步，说明您已经完成了任务，请不要在点了，把机会留给真正需要的糖友，谢谢!!!</h2>

                <div style="height: 5px;"></div>
                <div style="height: 5px;"></div>

                <p class="text-gray-500">如果您真的需要，请输入验证码，添加客服</p>
            </div>
            
            <div class="space-y-6">
                <!-- 难度选择 -->
                <div class="space-y-2" style="display: none;">
                    <label class="block text-gray-700 font-medium">干扰线难度</label>
                    <div class="flex gap-2 flex-wrap" id="difficultySelector">
                        <div class="difficulty-option active bg-gray-100 text-gray-700" data-level="1">简单</div>
                        <div class="difficulty-option bg-gray-100 text-gray-700" data-level="2">中等</div>
                        <div class="difficulty-option bg-gray-100 text-gray-700" data-level="3">困难</div>
                    </div>
                </div>
                
                <!-- 验证码展示区域 -->
                <div class="space-y-3">
                    <div class="flex items-center gap-3">
                        <div id="codeDisplay" class="code-container flex-1 h-24 md:h-32 flex items-center justify-center">
                            <span class="text-gray-400 text-xl">点击生成验证码</span>
                        </div>
                   <!--     <button type="button" id="refreshCode" class="bg-gray-100 p-3 rounded-lg text-gray-600 hover:bg-gray-200 transition-all duration-300 self-center">
                            <i class="fa fa-refresh"></i>
                        </button>-->
                    </div>
             <!--       <p class="text-xs text-gray-500 flex items-center">
                        <i class="fa fa-info-circle mr-1"></i> 点击验证码区域或刷新按钮可重新生成
                    </p>-->
                </div>
                
                <!-- 验证码输入框 -->
                <div class="space-y-2">
                    <label for="codeInput" class="block text-gray-700 font-medium">
                        输入验证码
                    </label>
                    <input type="text" id="codeInput" 
                           class="w-full px-4 py-3.5 border border-gray-200 rounded-lg input-focus bg-gray-50 placeholder-gray-400 text-lg"
                           placeholder="请输入验证码" maxlength="6">
                </div>
                
                <!-- 验证按钮 -->
                <button type="button" id="verifyBtn" 
                        class="w-full btn-primary flex items-center justify-center text-lg">
                    <i class="fa fa-check-circle mr-2"></i> 验证
                </button>
                
                <!-- 验证结果 -->
                <div id="resultMessage" class="hidden p-3.5 rounded-lg text-center font-medium transition-all duration-300 transform text-lg"></div>
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            let currentCode = '';
            let currentDifficulty = 1; // 默认简单难度
            
            // 鲜艳的数字颜色
            const vibrantColors = [
                '#E53E3E', // 红色
                '#D97706', // 橙色
                '#059669', // 绿色
                '#2563EB', // 蓝色
                '#7C3AED', // 紫色
                '#DB2777'  // 粉色
            ];
            
            // 暗色干扰线颜色
            const darkLineColors = [
                'rgba(107, 114, 128, 0.2)',  // 灰色
                'rgba(31, 41, 55, 0.2)',     // 深灰
                'rgba(156, 163, 175, 0.2)',  // 浅灰
                'rgba(75, 85, 99, 0.2)'      // 中灰
            ];
            
            // 根据难度设置干扰线数量和样式
            const difficultySettings = {
                1: { lines: 3, maxThickness: 1.2, maxOpacity: 0.2 },    // 简单
                2: { lines: 6, maxThickness: 1.5, maxOpacity: 0.3 },    // 中等
                3: { lines: 9, maxThickness: 2, maxOpacity: 0.4 }       // 困难
            };
            
            // 生成随机4-6位数字验证码
            function generateCode() {
                // 清空之前的干扰元素
                $('.disturbance').remove();
                
                // 随机生成4-6位长度
                const length = Math.floor(Math.random() * 3) + 4;
                let code = '';
                for (let i = 0; i < length; i++) {
                    code += Math.floor(Math.random() * 10);
                }
                currentCode = code;
                
                // 获取当前难度设置
                const settings = difficultySettings[currentDifficulty];
                
                // 生成带有随机样式的验证码字符
                const codeDisplay = $('#codeDisplay');
                const rotations = currentDifficulty === 3 ? 
                    [-12, -8, -4, 0, 4, 8, 12] : 
                    [-8, -4, 0, 4, 8]; // 困难模式旋转角度更大
                
                const spans = code.split('').map((char) => {
                    const rotation = rotations[Math.floor(Math.random() * rotations.length)];
                    const color = vibrantColors[Math.floor(Math.random() * vibrantColors.length)];
                    // 大字体，确保显眼
                    const fontSize = window.innerWidth < 768 ? 
                        28 + Math.floor(Math.random() * 6) : 36 + Math.floor(Math.random() * 8);
                        
                    return `<span class="code-char" style="
                        transform: rotate(${rotation}deg); 
                        color: ${color}; 
                        font-size: ${fontSize}px;
                        text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
                    ">${char}</span>`;
                });
                
                codeDisplay.html(spans.join(' '));
                
                // 添加干扰线
                addDisturbanceLines(settings);
            }
            
            // 添加干扰线（暗色）
            function addDisturbanceLines(settings) {
                const codeDisplay = $('#codeDisplay');
                const width = codeDisplay.width();
                const height = codeDisplay.height();
                const svg = $(`<svg class="disturbance absolute" width="${width}" height="${height}" style="top:0; left:0; pointer-events:none;"></svg>`);
                codeDisplay.append(svg);
                
                // 添加干扰线
                for (let i = 0; i < settings.lines; i++) {
                    const strokeWidth = 0.8 + Math.random() * settings.maxThickness;
                    const opacity = 0.1 + Math.random() * settings.maxOpacity;
                    const color = darkLineColors[Math.floor(Math.random() * darkLineColors.length)];
                    
                    // 随机位置
                    const x1 = Math.random() * width;
                    const y1 = Math.random() * height;
                    const x2 = Math.random() * width;
                    const y2 = Math.random() * height;
                    
                    // 创建线条
                    const line = $(`<line x1="${x1}" y1="${y1}" x2="${x2}" y2="${y2}" 
                          stroke="${color}" stroke-width="${strokeWidth}" opacity="${opacity}"/>`);
                    svg.append(line);
                }
            }
            
            // 验证输入的验证码
            function verifyCode() {
                const inputCode = $('#codeInput').val().trim();
                const resultMessage = $('#resultMessage');
                
                // 清空之前的结果
                resultMessage.addClass('hidden');
                
                // 验证输入是否为空
                if (inputCode === '') {
                    showResult('请输入验证码', 'error');
                    return;
                }
                
                // 验证是否为纯数字
                if (!/^\d+$/.test(inputCode)) {
                    showResult('验证码只能包含数字', 'error');
                    return;
                }
                
                // 验证长度是否为4-6位
                if (inputCode.length < 4 || inputCode.length > 6) {
                    showResult('验证码长度必须为4-6位', 'error');
                    return;
                }
                
                // 验证是否与生成的验证码一致
                if (inputCode === currentCode) {
                    showResult('验证成功！', 'success');
                } else {
                    showResult('验证码不正确，请重新输入', 'error');
                    // 错误时添加抖动效果
                    //$('#codeInput').addClass('animate-shake');
                    setTimeout(() => {
                        $('#codeInput').removeClass('animate-shake');
                    }, 500);
                    // 1秒后自动刷新验证码
                    //setTimeout(generateCode, 1000);
                }
            }
            
            // 显示验证结果
            function showResult(message, type) {
                const resultMessage = $('#resultMessage');
                resultMessage.text(message)
                            .removeClass('hidden transform -translate-y-2 opacity-0')
                            .addClass('translate-y-0 opacity-100');
                
                if (type === 'success') {
                    resultMessage.removeClass('bg-red-50 text-danger border border-red-100')
                                .addClass('bg-green-50 text-success border border-green-100');
                } else {
                    resultMessage.removeClass('bg-green-50 text-success border border-green-100')
                                .addClass('bg-red-50 text-danger border border-red-100');
                }
            }
            
            // 添加抖动动画样式
            $('<style>')
                .prop('type', 'text/css')
                .html('@keyframes shake { 0%, 100% { transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); } 20%, 40%, 60%, 80% { transform: translateX(5px); } } .animate-shake { animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both; }')
                .appendTo('head');
            
            // 初始化难度选择样式
            $('.difficulty-option').click(function() {
                $('.difficulty-option').removeClass('active bg-primary text-white').addClass('bg-gray-100 text-gray-700');
                $(this).addClass('active bg-primary text-white').removeClass('bg-gray-100 text-gray-700');
                currentDifficulty = parseInt($(this).data('level'));
                generateCode(); // 切换难度后重新生成验证码
            });
            
            // 生成初始验证码
            generateCode();
            
            // 事件绑定
            $('#refreshCode').click(generateCode);
            $('#codeDisplay').click(generateCode);
            $('#verifyBtn').click(verifyCode);
            
            // 支持回车键验证
            $('#codeInput').keypress(function(e) {
                if (e.which === 13) { // 回车键
                    verifyCode();
                }
            });
            
            // 输入框获取焦点时隐藏结果信息
            $('#codeInput').focus(function() {
                $('#resultMessage').addClass('hidden');
            });
            
            // 响应式调整
            $(window).resize(function() {
                // 重新生成验证码以适应窗口大小变化
                if (currentCode) generateCode();
            });
        });
    </script>
</body>
</html>
    